<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/base.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/font/font-awesome-4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/plug-in/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/list-detail.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/common/js/date/common.css" />
    <script src="/public/static/wx/js/flex.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/public/static/wx/css/submit-protocol.css" />
    <title>任务信息</title>
    <style type="text/css">
        #layui-layer1{
            overflow: hidden;
        }

        .buttons a{
            width: 100%;
            height: 100%;
            color: #fff;
            display: inline-block;
        }
        .layui-layer-btn a{
            font-size: 18px;
        }
        .layui-layer-content{
            font-size: 17px;
        }

        .input-text{
            height: 35px;
            line-height: 1.3;
            line-height: 35px\9;
            border-width: 1px;
            border-style: solid;
            border-color: #aaa;
            background-color: #fff;
            border-radius: 2px;
            width: 100%;
            padding: 5px 6px;
        }

        .item{
            margin: 14px 8px;
        }
        .item .label{
            display: inline-block;
            width: 66px;
            text-align: center;
        }
        .item .input-item{
            display: inline-block;
            width: 75%;
        }

        #dateshadow,#datePage{
            z-index: 19891021;
        }


        .fls{
            width: 23.5%;
            height: 71px;
            display: inline-block;
            text-align: center;
            position: relative;
            margin: 0 2px;
        }
        #ls img,#ls-gu img{
            height: 80%;
            max-width: 100%;
        }
        .fname{
            display: block;
            font-size: 14px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #m1,#m2,#m3,#m4{
            display: none;
            text-align: center;
            line-height: 76px;
            background-color: rgba(0,0,0,0.4);
            font-size: 15px;
            color: #fff;
            width: 100px !important;
            height: 75px !important;
        }
        .opt_file{
            width: 100px !important;
            height: 75px !important;
            border-radius: 5px !important;
            overflow: hidden;
        }
        .remove-f{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 80%;
            background-color: rgba(0,0,0,0.2);
            color: #f8f8f8;
            line-height: 65px;
        }

        {if condition="$info.none==1"}
        .buttons{
            display: none !important;
        }
        {/if}
    </style>
</head>

<body>
<div class="index">
    <ul class="list">
        <li class="clearfix">
            <p class="title">标题</p>
            <p class="content">{$info.title}</p>
        </li>
        <li class="clearfix">
            <p class="title">电话</p>
            <p class="content">{$info.tel}</p>
        </li>
        <li class="clearfix">
            <p class="title">地址</p>
            <p class="content">{$info.address}</p>
        </li>
        <li class="clearfix area">
            <p class="title">故障类型</p>
            <p class="content">{$info.fault_name}</p>
        </li>
        <li class="clearfix">
            <p class="title">描述</p>
            <p class="content">{$info.desc}</p>
        </li>
        <li class="clearfix">
            <p class="title">附件</p>
            <p class="content">
                {if condition=" !empty($info.attach)"}
                <a href="{$info.attach}" style="color: #009E94;">附件1</a>
                {/if}
                {if condition=" !empty($info.w_attach)"}
                <a href="{$info.w_attach}" style="color: #009E94;">附件2</a>
                {/if}
            </p>
        </li>
        {if condition=" !empty($info.ticket)"}
        <li class="clearfix">
            <p class="title">工作票</p>
            <p class="content">
                <?php $arr= explode(';',$info['ticket']); ?>
                {foreach $arr as $k=>$vo}
                {if condition=" !empty($vo)"}
                <a href="{$vo}" target="_blank" style="color: blue">工作票{$k+1}</a>
                {/if}
                {/foreach}
            </p>
        </li>
        {/if}
        {if condition=" !empty($info.arge)"}
        <li class="clearfix">
            <p class="title">协议单</p>
            <p class="content">
                <?php $arr= explode(';',$info['arge']); ?>
                {foreach $arr as $k=>$vo}
                {if condition=" !empty($vo)"}
                <a href="{$vo}" target="_blank" style="color: blue">协议单{$k+1}</a>
                {/if}
                {/foreach}
            </p>
        </li>
        {/if}
        <li class="clearfix">
            <p class="title">创建时间</p>
            <p class="content">{$info.c_time}</p>
        </li>
        <li class="clearfix">
            <p class="title">状态</p>
            <p class="content">
                {if condition = "$info.state_id != 20"}
                    {if condition="empty($info.reg_name)"}
                        ({$info.name})
                    {else /}
                        ({$info.reg_name})
                    {/if}
                {/if}
                {$info.state_name}
            </p>
        </li>

        {if condition = "$info.is_conf==2"}
        <li class="clearfix">
            <p class="title">拒单原因</p>
            <p class="content" style="color: red">{$info.cause}</p>
        </li>
        {/if}

    </ul>
   <!-- <ul class="buttons jiedan clearfix">
        <li class="refuse">选择工具</li>
        <li class="apply">工具列表</li>
        <li class="follow">跟踪状态</li>
    </ul>-->
    <ul class="buttons clearfix" style="display: flex;text-align: center;justify-content: center">

        {if condition="$info.is_conf==1"}
            <li class="apply" onclick="tools()">工具列表</li>
            <li class="add-follow"><a href="{:url('teamUI')}?id={$info.id}">团队管理</a></li>
        {/if}

        {if condition="$info.is_conf==0"}
            <li class="add-follow" onclick="conf()"><a href="javascript:;">接单</a></li>
            <li class="refuse" onclick="unConf()"><a href="javascript:;" did="{$info.id}">拒单</a></li>
        {else /}
            <li class="follow"><a href="{:url('trackUI')}?id={$info.id}">查看跟踪</a></li>
        {/if}

    </ul>
    {if condition="$info.is_conf==1&&$info.state_id==25"}
    <ul class="buttons clearfix" id="confed" style="display: flex;text-align: center;justify-content: center">

        <li class="add-follow" id="creaFoll" onclick="creaTrack()" style="display: none;">创建日单</li>
        <li class="add-follow" id="addFoll" onclick="addTrack()" style="display: none;">添加跟踪</li>

    </ul>
    {/if}
</div>
<div id="datePlugin"></div>
<script src="/public/static/wx/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/static/common/js/date/date.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/static/common/js/date/iscroll.js" type="text/javascript" charset="utf-8"></script>
<script src="/public/static/wx/plug-in/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var layer = layui.layer;
    var did = '{$info.id}';
    function conf() {
        layer.confirm('确认接单吗?', {icon: 3, title:'提示',shadeClose:true}, function(index){
            var indexl = layer.load(0,{offset:['45%','45%']});
            $.post('{:url("receipt")}',{id:did},function (res) {
                layer.close(indexl);
                if(res.code==1){
                    layer.msg('接单成功',{icon:6,shade:0.1,time:1000},function () {
                        location.href = location.href+"&t";
                    });
                }else{
                    layer.msg(res.msg,{icon:5});
                }
            });

            layer.close(index);
        });
    }

    //拒单
    function unConf() {
        layer.prompt({
            formType: 2,
            value: '',
            title: '请输入拒绝原因',
            area: ['300px', '200px'] //自定义文本域宽高
        }, function(value, index, elem){

            $.post('{:url("meetre")}',{id:did,val:value},function (res) {
                if(res.code==1){
                    layer.msg(res.msg,{icon:6,shade:0.1},function () {
                        location.href = location.href+"&t";
                    });
                }else{
                    layer.msg(res.msg,{icon:5});
                }
            });

            layer.close(index);
        });
    }

    let info = {:json_encode($info)};
    //工具
    function tools() {
        location.href = "{:url('toolsUI')}?id="+did+'&title='+info.title+"&fault_name="+info.fault_name+'&time='+info.c_time+'&ste='+info.state_id;
    }

    $.post('{:url("sheet")}',{id:did},function (res) {
        if(res.code==1){
            $('#addFoll').show();
        }else{
            $('#creaFoll').show();
        }
    });
    //查询是否有未完成日单
    function creaTrack() {
        layer.prompt({title:'请输入日单标题'},function(value, index, elem){

            $.post('{:url("careaTrack")}',{dispatch_id:did,title:value},function (res) {
                if(res.code==1){
                    location.reload();
                }else{
                    layer.msg(res.msg,{icon:5,time:1000});
                }
            });

            layer.close(index);
        });
    }


    //添加跟踪
    let files = [];
    let files_base = [];
    let gu = [];
    let gu_base = [];
    let file = null;
    let index_send;
    function addTrack() {
        var indexl = layer.load(0,{offset:['45%','45%']});
        $.post('{:url("find")}',{dis_id:did},function (res) {
            layer.close(indexl);
            var str = '';
            str = '<div class="item">\n' +
                '    <label class="label">启程日期</label>\n' +
                '    <div class="input-item">\n' +
                '      <input type="text" name="title" id="startTime"  placeholder="请选择"  class="input-text">\n' +
                '    </div>\n' +
                '  </div>';
            str += '<div class="item">\n' +
                '    <label class="label">预计到达</label>\n' +
                '    <div class="input-item">\n' +
                '      <input type="text" name="title" id="endTime"  placeholder="请选择" class="input-text">\n' +
                '    </div>\n' +
                '  </div>';
            str += '<div class="item">\n' +
                '    <label class="label">交通工具</label>\n' +
                '    <div class="input-item">\n' +
                '      <input type="text" name="title" id="veh"  placeholder="请输入" class="input-text">\n' +
                '    </div>\n' +
                '  </div>';

            step = 0;


            let height = 'auto';
            let btn = ['提交','取消'];

            if(res.code == 1){
                step = res.data;
                switch (res.data) {
                    case 3:
                        str = '<div style="font-size: 18px;text-align: center;line-height: 60px;">维修团队是否已到达？</div>';
                        str += '<div class="item">\n' +
                            '    <label class="label">时间</label>\n' +
                            '    <div class="input-item">\n' +
                            '      <input type="text" name="title" id="startTime" value="'+getNowFormatDate()+'"  placeholder="请选择"  class="input-text">\n' +
                            '    </div>\n' +
                            '  </div>';
                        break;
                    case 4:
                        str = '<div style="font-size: 18px;text-align: center;line-height: 60px;">是否与甲方确认工单？</div>';

                        break;
                    case 5:
                        height = '350px';
                        str = '<div class="index" ><div class="input-group clearfix" style="margin: 0;">\n' +
                            '<div style="text-align: center;font-size: 18px;">请上传工作票</div>'+
                            '    <div class="input-box have opt_file">\n' +
                            '        <input type="file" accept="image/*"  id="files"/>\n' +
                            '        <span id="m1">继续选择</span>\n' +
                            '    </div>\n' +
                            '    <div class="input-box shot opt_file">\n' +
                            '        <input type="file" accept="image/*" id="file" capture="camera"/>\n' +
                            '        <span id="m2">继续拍摄</span>\n' +
                            '    </div><div style="clear: both"></div>' +
                            '    <div id="ls" style="margin-top: 8px;">\n' +
                            '    </div>\n' +
                            '</div>\n' +

                            '<div class="input-group clearfix" style="margin: 0;margin-top: 10px;border-top: 1px solid #ccc;">' +
                            '<div style="text-align: center;font-size: 18px;">请上传站班照</div>'+
                            '    <div class="input-box have opt_file">\n' +
                            '        <input type="file" accept="image/*"  id="gu-files"/>\n' +
                            '        <span id="m4">继续选择</span>\n' +
                            '    </div>\n' +
                            '    <div class="input-box shot opt_file">\n' +
                            '        <input type="file" accept="image/*" id="gu-file" capture="camera"/>\n' +
                            '        <span id="m3">继续拍摄</span>\n' +
                            '    </div><div style="clear: both"></div>' +
                            '    <div id="ls-gu" style="margin-top: 8px;">\n' +
                            '    </div>\n' +
                            '</div>' +

                            '</div>';
                        break;
                    case 6:
                        str = '<div style="font-size: 18px;text-align: center;line-height: 60px;">是否开始维修？</div>';
                        str += '<div class="item">\n' +
                            '    <label class="label">时间</label>\n' +
                            '    <div class="input-item">\n' +
                            '      <input type="text" name="title" id="startTime" value="'+getNowFormatDate()+'"  placeholder="请选择"  class="input-text">\n' +
                            '    </div>\n' +
                            '  </div>';
                        break;
                    case 7:
                        str = '<div style="font-size: 18px;text-align: center;line-height: 60px;">是否结束维修？</div>';
                        str += '<div class="item">\n' +
                            '    <label class="label">时间</label>\n' +
                            '    <div class="input-item">\n' +
                            '      <input type="text" name="title" id="startTime" value="'+getNowFormatDate()+'"  placeholder="请选择"  class="input-text">\n' +
                            '    </div>\n' +
                            '  </div>';
                        break;
                    case 8:
                        str = '';
                        comp();return;
                        break;
                    case 9:
                        layer.msg('任务已完成',{icon:6});return;
                        break;
                }
            }

            layer.open({
                title: '提交跟踪'
                ,content: str
                ,shadeClose:true
                ,area:['90%',height]
                ,btn:btn
                ,zIndex:19891
                ,yes:function (indext) {
                    var sobj = {
                        did:did
                    };

                    let isup = 1;

                    switch (step) {
                        case 0:
                        case 2:
                            var st = $('#startTime').val();
                            var et = $('#endTime').val();
                            var veh = $('#veh').val();
                            sobj.step = 3;
                            sobj.content = '团队于'+st+'启程，预计'+et+'到达，交通工具：'+veh;
                            break;
                        case 3:
                            var st = $('#startTime').val();
                            sobj.step = 4;
                            sobj.content = '维修团队已到达,时间：'+st;
                            break;
                        case 4:
                            sobj.step = 5;
                            sobj.content = '于甲方确认工单';
                            break;
                        case 5:
                            sobj.step = 6;
                            sobj.content = '已上传工作票';
                            break;
                        case 6:
                            var st = $('#startTime').val();
                            sobj.step = 7;
                            sobj.content = '开始维修，时间：'+st;
                            break;
                        case 7:
                            var st = $('#startTime').val();
                            sobj.step = 8;
                            sobj.content = '维修结束，时间：'+st;
                            break;
                        case 8:
                            sobj.step = 9;
                            sobj.content = '已上传完成协议';
                            break;
                        case 9:
                            return;
                            break;
                    }

                    if(step == 5){
                        if(file) files.push(file);

                        if(files.length<=0){
                            layer.msg('你没有选择文件或拍摄照片',{icon:5});
                            return;
                        }
                        if(gu.length<=0){
                            layer.msg('你没有拍摄站班照',{icon:5});
                            return;
                        }

                        let form = new FormData();

                        form.append('dis_id',did);

                        for (let u=0;u<files_base.length;u++){
                            form.append('files[]',files_base[u]);
                        }
                        for (let u=0;u<gu_base.length;u++){
                            form.append('gu[]',gu_base[u]);
                        }

                        let http = new XMLHttpRequest();
                        http.open('post','{:url("ticket")}');
                        layer.msg('文件上传中……');
                        index_send = layer.load(0,{offset:['45%','45%'],zIndex:19891099});
                        http.onreadystatechange = function(){
                            if (http.readyState === 4) {
                                layer.close(index_send);
                                let res = http.responseText;
                                res = JSON.parse(res);
                                if (http.status === 200) {
                                    if(res.code == 1){
                                        layer.msg(res.msg,{icon:6});

                                        /*let index_2 = layer.load(0,{offset:['45%','45%']});
                                        $.post('{:url("addTrack")}',sobj,function (res) {
                                            layer.close(index_2);
                                            if(res.code==1){
                                                layer.msg(res.msg,{icon:6});
                                            }else{
                                                layer.msg(res.msg,{icon:5});
                                            }
                                        });*/

                                    }else{
                                        layer.msg(res.msg,{icon:5});
                                        isup = 0;
                                    }
                                } else {
                                    layer.msg('上传失败',{icon:5});
                                    isup = 0;
                                }
                            }
                        };
                        http.send(form);

                        /*setTimeout(function () {
                            index_send = layer.load(0,{offset:['45%','45%'],zIndex:19891099});
                        },1);*/


                    }else{
                        let index_2 = layer.load(0,{offset:['45%','45%']});
                        $.post('{:url("addTrack")}',sobj,function (res) {
                            layer.close(index_2);
                            if(res.code==1){
                                layer.msg(res.msg,{icon:6});
                            }else{
                                layer.msg(res.msg,{icon:5});
                            }
                        });
                    }

                    layer.close(indext);

                }
                ,success:function (lay,index) {
                    $('#startTime').date({theme:"datetime"});
                    $('#endTime').date({theme:"datetime"});

                    if(step==5){
                        ls();
                        gu_ls();
                    }

                    //选择工作票
                    $('#files').change(function () {
                        //files = [];
                        let fs = $('#files')[0].files;
                        if(fs.length>0){
                            for (let i=0;i<fs.length;i++){
                                files.push(fs[i]);
                            }
                        }
                        $('#m1').css('display','block');
                        ls();
                        files_base_fn();
                    });

                    $('#file').change(function () {
                        //file = $('#file')[0].files[0];
                        files.push($('#file')[0].files[0]);
                        ls();
                        files_base_fn();
                        $('#m2').css('display','block');
                    });

                    //站班照
                    $('#gu-file').change(function () {
                        gu.push($('#gu-file')[0].files[0]);
                        gu_ls();
                        gu_base_fn();
                        $('#m3').css('display','block');
                    });
                    $('#gu-files').change(function () {
                        //files = [];
                        gu.push($('#gu-files')[0].files[0]);
                        /*let fs = $('#gu-files')[0].files;
                        if(fs.length>0){
                            for (let i=0;i<fs.length;i++){
                                files.push(fs[i]);
                            }
                        }*/
                        $('#m4').css('display','block');
                        gu_ls();
                        gu_base_fn();
                    });

                }
            });
        });
    }

    //当前时间
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
        return currentdate;
    }

    function ls() {
        $('#ls').empty();
        if(files.length>0){
            for (let i=0;i<files.length;i++){
                $('#ls').append('<span class="fls">\n' +
                    '                <img src="'+pos(files[i],'t'+i)+'" class="t'+i+'" alt="">\n' +
                    '                <span class="fname">'+files[i].name+'</span>' +
                    '<span class="remove-f" onclick="mov_f('+i+')">移除</span>'+
                    '            </span>');
            }
        }

        /*if(file)
            $('#ls').append('<span class="fls">\n' +
                '                <img src="'+pos(file,'one')+'" class="one" alt="">\n' +
                '                <span class="fname">'+file.name+'</span>\n' +
                '<span class="remove-f">移除</span>'+
                '            </span>');*/

    }


    function gu_ls() {
        $('#ls-gu').empty();
        if(gu.length>0){
            for (let i=0;i<gu.length;i++){
                $('#ls-gu').append('<span class="fls">\n' +
                    '                <img src="'+pos(gu[i],'g'+i)+'" class="g'+i+'" alt="">\n' +
                    '                <span class="fname">'+gu[i].name+'</span>' +
                    '<span class="remove-f" onclick="mov_gu('+i+')">移除</span>'+
                    '            </span>');
            }
        }
    }

    function mov_gu(pos) {
        gu.splice(pos,1);
        gu_ls();
        gu_base_fn();
    }

    function mov_f(pos) {
        files.splice(pos,1);
        ls();
        files_base_fn();
    }

    function pos(name,cl) {
        if(name.type.substr(0,name.type.indexOf('/')) == 'image'){
            return base(name,cl);
        }else{
            return '/public/static/common/images/'+type(name.name.substr(name.name.indexOf('.')+1))+'.png';
        }
    }


    function type(name) {
        let ext = ['pdf','ppt','rar','txt','xls','zip'];
        for (let n=0;n<ext.length;n++){
            if(name == ext[n])
                return ext[n];
        }
        return 'file';
    }

    function base(fls,cl){
        if (!/image\/\w+/.test(fls.type))
        {
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(fls);
        reader.onload = function (e) {

            $('.'+cl).attr('src',this.result);
        }
    }


    //提交完成
    function comp() {
        location.href = "{:url('complUI')}?id="+did+'&title='+info.title+"&fault_name="+info.fault_name+'&time='+info.c_time;
    }




    function photoCompress(file,w,objDiv,is){
        var ready=new FileReader();
        ready.readAsDataURL(file);
        ready.onload=function(){
            var re=this.result;
            canvasDataURL(re,w,objDiv);
        };
    }

    function canvasDataURL(path, obj, callback){
        var img = new Image();
        img.src = path;
        img.onload = function(){
            var that = this;
            // 默认按比例压缩
            var w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            var quality = 0.7;  // 默认图片质量为0.7
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);
            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                quality = obj.quality;
            }
            // quality值越小，所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            callback(base64);
        }
    }


    function gu_base_fn() {
        gu_base = [];
        for (var i=0;i<gu.length;i++){
            if(gu[i].size/1024 > 1025*3) {
                photoCompress(gu[i], {
                    quality: 0.2
                }, function(base64Codes){
                    gu_base.push(base64Codes);
                });
            }else{
                base64img(gu[i],function (bases) {
                    gu_base.push(bases);
                });
            }
        }
    }

    function files_base_fn() {
        files_base = [];
        for (var i=0;i<files.length;i++){
            if(files[i].size/1024 > 1025*3) {
                photoCompress(files[i], {
                    quality: 0.2
                }, function(base64Codes){
                    files_base.push(base64Codes);
                });
            }else{
                base64img(files[i],function (bases) {
                    files_base.push(bases);
                });
            }
        }
    }


    function base64img(file_sou,fn){
        if (!/image\/\w+/.test(file_sou.type))
        {
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file_sou);
        reader.onload = function (e) {
            fn(this.result);
        }
    }
</script>
</body>

</html>